<script setup lang="ts">
import { FormInstance, message } from "ant-design-vue"
import { clone } from "radash"
import { onMounted, reactive, ref } from "vue"
import type { FormState } from "./types"
import { CloseCircleTwoTone } from "@ant-design/icons-vue"
// 表单状态
const formStates = reactive<{ formData: Array<FormState> }>({
  formData: [
    {
      storageKey: "token",
      storageType: "localStorage",
    },
  ],
})
onMounted(() => {
  getStorageData()
})
// 读取持久数据
async function getStorageData() {
  const storageInfo = await chrome.storage.sync.get("storageData")
  console.log(storageInfo, "storageInfo")
  formStates.formData = storageInfo.storageData || [
    {
      storageKey: "",
      storageType: "localStorage",
    },
  ]
}
// 持久存储数据
function setStorageData(formData: Array<FormState>) {
  if (formData.length > 0) {
    chrome.storage.sync.set({ storageData: clone(formData) }, () => {
      message.success("storageData save success")
    })
  } else {
    chrome.storage.sync.remove("storageData", () => {
      message.success("storageData remove success")
    })
  }
}
// select候选项
const options = [
  { name: "sessionStorage存储", key: "sessionStorage" },
  { name: "localStorage存储", key: "localStorage" },
]

const formRef = ref<FormInstance>()

function onClick() {
  formStates.formData.push({
    storageKey: "",
    storageType: "localStorage",
  })
}
function onRemove(formState: FormState) {
  formStates.formData = clone(formStates.formData).filter((item) => {
    return item.storageKey !== formState.storageKey
  })
  setStorageData(formStates.formData)
}
function submitForm() {
  formRef.value
    ?.validate()
    .then(() => {
      // 表单校验成功
      setStorageData(formStates.formData)
    })
    .catch((error) => {
      // 表单校验失败
      console.log("error", error)
      message.error("表单内容填写有误")
    })
}
</script>

<template>
  <a-form
    :model="formStates"
    :layout="'horizontal'"
    name="form"
    ref="formRef"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="on"
  >
    <div class="state-item" v-for="(formState, index) in formStates.formData">
      <a-form-item label="存储名字" :name="['formData', index, 'storageKey']" :rules="[{ required: true, message: '必须输入存储名字' }]">
        <a-input placeholder="请输入存储名字" v-model:value="formState.storageKey"></a-input>
      </a-form-item>
      <a-form-item label="存储类型" :name="['formData', index, 'storageType']" :rules="[{ required: true, message: '请选择存储类型' }]">
        <a-select v-model:value="formState.storageType">
          <a-select-option v-for="option in options" :key="option.key" :value="option.key">{{ option.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <CloseCircleTwoTone class="close-icon" @click="onRemove(formState)" />
      </a-form-item>
    </div>
    <a-form-item>
      <a-button type="primary" ghost @click="onClick">添加键值对</a-button>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="submitForm">确定</a-button>
    </a-form-item>
  </a-form>
  <div></div>
</template>

<style scoped lang="less">
.state-item {
  display: flex;
  align-items: end;
  .close-icon {
    font-size: 22px;
    margin-left: 5px;
    cursor: pointer;
  }
}
</style>
